<template>
    <div>
        <el-form
            ref="formRef"
            :model="form"
            label-width="100px"
        >

            <el-checkbox-group v-model="form.checkedRoles">
                <el-checkbox v-for="role in form.roleList" :id="String(role.id)" :key="role.id" :label="role.id"  name="checkedRoles" >{{role.name}}</el-checkbox>
            </el-checkbox-group>

        </el-form>
        <div class="button-group__footer">
            <mine-button type="primary" secondary class="button-group__footer__cancel" @click="handleClose()">取消</mine-button>
            <mine-button type="primary" @click="handleConfirm()">确定</mine-button>
        </div>
    </div>
</template>

<script>
import authUtil from '../../../utils/authUtil.js';

export default {
    name: "roleDialog",
    data() {
        return {
            form: {
                id: -1,
                roleList: [],
                checkedRoles: []
            }
        }
    },
    props: {
        id: {
            type: Number,
            default: -1,
            required: true
        },
        roleDialogVisible: {
            type: Boolean,
            default: false,
            required: true
        },
        sysRoleList: {
            type: Array,
            // eslint-disable-next-line vue/require-valid-default-prop
            default: [],
            required: true
        }
    },
    watch: {
        roleDialogVisible(newVal, oldVal) {
            let id = this.id
            console.log('id', id)
            if (id != -1) {
                this.form.checkedRoles = []
                this.sysRoleList.forEach(item => {
                    this.form.checkedRoles.push(item.id)
                })
                this.initFormData(id)
            }
        }
    },
    methods: {
        async initFormData(id) {
            const res = await authUtil.get("sys/role/listAll");
            this.form.roleList = res.data.roleList
            this.form.id = id
        },
        init(){
            let id = this.id
            console.log('id', id)
            if (id != -1) {
                this.form.checkedRoles = []
                this.sysRoleList.forEach(item => {
                    this.form.checkedRoles.push(item.id)
                })
                this.initFormData(id)
            }
        },
        handleClose() {
            this.$emit('close');
        },
        handleConfirm() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    let result = await authUtil.post("sys/user/grantRole/" + this.form.id, this.form.checkedRoles)
                    let data = result.data
                    if (data.code === 200) {
                        this.$message.success('执行成功！')
                        this.$emit('initUserList')
                        this.handleClose()
                    } else {
                        this.$message.error(data.msg)
                    }
                } else {
                    console.log('fail')
                }
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<style scoped lang="scss">
.button-group__footer {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 10px 10px 0;
&__cancel {
     margin: 0 0 0 10px;
 }
}
</style>
